<template>
  <div
    ref="chartContainer"
    :style="{ height: propsHeight, width: propsWidth }"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])

const chartContainer = ref(null)

const props = defineProps({
  propsHeight: String,
  propsWidth: String
})

let myChart = null

const option = {
  xAxis: {
    type: 'category',
    data: [
      '前三天',
      '前两天',
      '前一天',
      '当前日期',
      '后一天',
      '后两天',
      '后三天'
    ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}

onMounted(() => {
  if (chartContainer.value) {
    myChart = echarts.init(chartContainer.value)
    myChart.setOption(option)

    // 如果高度和宽度是动态的，您可以监听它们的变化并更新图表大小
    // watch([() => propsHeight, () => propsWidth], ([newHeight, newWidth]) => {
    //   myChart.resize({ height: newHeight, width: newWidth });
    // }, { immediate: true });
  }
})

// 如果要从父组件接收高度和宽度作为 props，请取消以下代码的注释，
// 并确保在父组件中正确地传递了这些 props。
// const props = defineProps({
//   height: String,
//   width: String
// });
// const propsHeight = computed(() => props.height || '1000px');
// const propsWidth = computed(() => props.width || '1000px');
</script>

<style scoped>
/* 您可以在这里添加一些样式 */
</style>
